
@use '../../../sass_theme/pri/__conf' as *
@use './__common' as *

.o-app-bottom-bar
    bottom: 0
    
.app-bottom-bar-item-icon
    position: relative
    height: 1.3em !important
    &::after
        position: absolute
        width: 100%
        height: 100%
 
$abb-die: #acafb3 // #474747
$abb-die-hv: #8c8f93
$abb-die-fcs: #73767a

.app-bottom-bar-item
    width: $mw-app-bottom-bar-item
    height: $mh-app-bottom-bar-item
    color: $abb-die
    &:hover
        color: $abb-die-hv
    &:active, &:focus, &:focus-visible
        color: $abb-die-fcs

$abb-iive: blue
$abb-iive-bg: rgba(255, 255, 255, 0.382)
$abb-iive-c: $pri
.app-bottom-bar-item-iive
    color: $abb-iive
    background: $abb-iive-bg
    .app-bottom-bar-item-icon
        transform: scale(1)
        color: $abb-iive-c
    .app-bottom-bar-item-txt
        color: $abb-iive-c


// =========================================================
$abb-btn-c: pink
$abb-btn-bg: #f2f4f7
.app-bottom-bar-btn
    .app-bottom-bar-item-icon
        color: $abb-btn-c
        background: $abb-btn-bg
        width: 2.4em !important
        height: 2.4em !important
        border-radius: 100%
        display: flex
        align-items: center
        justify-content: center

// =========================================================

.index-bottom-bar
    background:  linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.382))
    backdrop-filter: blur(7px)
    .app-bottom-bar-item
        color: #59595a
